<template>
  <div class="Artist-container">
    <!-- 左边栏 -->
    <div class="artists-left">
      <h1>{{singerList.name}}</h1>
      <div class="artists-pic" :style="{backgroundImage:'url('+singerList.img1v1Url+')'}"></div>
      <!-- 选项卡 -->
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="热门作品" name="first" width="100px">
            <el-table ref="singleTable" :data="hotSongs" highlight-current-row style="width: 100%">
              <el-table-column type="index" width="80" label="序号"></el-table-column>
              <el-table-column property label="操作" width="80">
                <template slot-scope="scope">
                  <i class="el-icon-video-play" @click="play(scope)"></i>
                </template>
              </el-table-column>
              <el-table-column property="name" label="音乐标题" width="180"></el-table-column>
              <el-table-column property="al.name" label="专辑" width="180"></el-table-column>
              <el-table-column property="dt" label="时长" width="120"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="所有专辑" name="second" class="allAlbums">
            <div v-for="item in hotSongs" :key="item.id">
              <img :src="item.al.picUrl" alt>
              <span>{{item.al.name}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="相关MV" name="third" class="relativeMvs">
            <div v-for="item in singerMv" :key="item.id">
              <img :src="item.imgurl" alt>
              <span>{{item.name}}</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="艺人介绍" name="fourth" class="artistIntro">
            <h2>{{singerList.name}}简介</h2>
            <p>{{singerList.briefDesc}}</p>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
    <!-- 右边栏 -->
    <div class="artists-right">
      <h3>相似歌手</h3>
      <ul>
        <li v-for="item in simiSingers" :key="item.id" @click="toArtist(item.id)">
          <a href="javascript:;">
            <img :src="item.img1v1Url" alt>
          </a>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//获取歌手单曲
import { getSingerSingle, getSingerMv, getSimiSinger } from "@/api";

export default {
  data() {
    return {
      id:"",
      rid:"",
      singerId:'',
      singerList: [],
      hotSongs: [],
      singerMv: [],
      simiSingers: [],
      activeName: "first"
    };
  },
  mounted() {
    // 歌手详情
    this.getsingsingle(this.$route.params.id);
    this.getsingermvs(this.$route.params.id);
    this.getsimisingers(this.$route.params.id);
  },
  methods: {
    play(scope) {
      this.id = scope.row.id;
      this.$router.push({
        name: "sing",
        params: { id: this.id, rid: this.singerId }
      });
    },
    handleClick(tab, event) {},
    toArtist(data) {
      this.$router.push({ name: "Artists", params: { id: data } });
      location.reload();
    },
    // 获取歌手单曲
    getsingsingle(data) {
      // console.log(data)
      getSingerSingle({ id: data }).then(res => {
        const arr = res.data.hotSongs;
        for (let i = 0; i < arr.length; i++) {
          //遍历时长的时间戳转化为时间
          var dt = arr[i].dt;
          var minute = parseInt(parseInt(dt / 1000) / 60);
          var second = parseInt(dt / 1000) - minute * 60;
          if (minute < 10) {
            minute = "0" + minute;
          }
          if (second < 10) {
            second = "0" + second;
          }
          arr[i].dt = minute + ":" + second; //将转化的时间重新赋值再次进行遍历
        }
        this.singerList = res.data.artist;
        this.hotSongs = res.data.hotSongs;
        this.singerId=data
        console.log(this.singerId)
      });
    },
    // 获取歌手MV
    getsingermvs(data) {
      getSingerMv({ id: data }).then(res => {
        // console.log(res);
        this.singerMv = res.data.mvs;
      });
    },
    getsimisingers(data) {
      getSimiSinger({ id: data }).then(res => {
        this.simiSingers = res.data.artists;
        // console.log(this.simiSingers)
      });
    }
  }
};
</script>

<style>
.Artist-container {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  color: #333;
  overflow: hidden;
}
.artists-left {
  width: 780px;
  min-height: 800px;
  /* background: #ccc; */
  float: left;
}
.artists-right {
  width: 380px;
  min-height: 600px;
  /* background: #333; */
  float: right;
}
.artists-left > h1 {
  text-indent: 50px;
  margin: 20px 0 15px 0;
}
.artists-pic {
  width: 680px;
  height: 300px;
  background: no-repeat;
  background-position: top;
  background-size: 60%;
  margin-left: 50px;
}
.artists-right > h3 {
  height: 32px;
  line-height: 32px;
  text-indent: 50px;
  margin: 20px 0 15px 0;
  border-bottom: 1px solid #333;
}
.artists-right ul li {
  width: 100px;
  height: 150px;
  float: left;
  margin: 0 13px;
  text-align: center;
}
.artists-right ul li img {
  width: 100px;
  height: 100px;
}
.el-tabs {
  width: 680px;
  margin-left: 51px;
}
.allAlbums div {
  width: 150px;
  height: 180px;
  float: left;
  margin-right: 20px;
}
.allAlbums div img {
  width: 120px;
  height: 120px;
}
.allAlbums div span {
  font-size: 12px;
  line-height: 20px;
}
.relativeMvs div {
  width: 150px;
  height: 180px;
  float: left;
  margin-right: 20px;
}
.relativeMvs div img {
  width: 120px;
  height: 120px;
}
.relativeMvs div span {
  font-size: 12px;
  line-height: 20px;
}
.artistIntro h2 {
  margin: 8px 0;
}
.artistIntro p {
  text-indent: 32px;
}
</style>
